<template>
  <div class="current-root">
    <div class="top">
      <van-search desc="1、搜索框"
                  v-model="searchValue"
                  show-action
                  shape="round"
                  @cancel="searchCancel"
                  placeholder="城市/区域/位置"/>

      <van-tabs desc="2、城市标签切换"
                v-model:active="activeTab"
                @click-tab="tabClick"
                color="#ff9854"
                line-height="1px"
      >
        <!--   注意：变量对象 与 遍历 数组不同   -->
        <template v-for="(value, key, index) in allCities" :key="key">
          <van-tab :title="value.title" :name="key"/>
        </template>
      </van-tabs>
    </div>

    <div class="content">
      <city-group :group-data="curCityGroup"/>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {useCityStore} from "@/stores/modules/city";
import {storeToRefs} from "pinia";
import CityGroup from './cpns/city-group.vue'

const router = useRouter()
const searchValue = ref('')
const activeTab = ref(0)

// 数据都放在 store
const cityStore = useCityStore();
cityStore.fetchAllCitiesData().then(data => {
  // 展示 默认进来的数据
  if (Object.keys(data).length) {
    tabClick({name: Object.keys(data)[0]})
  }
})
// 直接解构不是响应式的，适合只展示的数据。 如果需要响应式，可以用 storeToRefs
const {allCities} = storeToRefs(cityStore)
console.log(allCities)

function searchCancel() {
  // 取消搜索，返回上一页
  router.back()
}

const curCityGroup = ref()

function tabClick({name}) {
  curCityGroup.value = allCities.value[name]
}


</script>

<style lang="less" scoped>
// 当前组件根css类
.current-root {
  .top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  .content {
    margin-top: 98px;
  }
}
</style>